<template>
	<view class="ALL">
		<view class="content" v-for="(item,index) in useOrderlist" :key="index">
			<view class="content-top">
				<text class="content-top-left">{{item.name}}</text>
				<text class="content-top-right">￥{{item.money}}</text>
			</view>
			<view class="content-mid">
				<text>{{item.time}}</text>
			</view>
			<view class="content-down">
				<text>{{item.color}}</text>
				<text>{{item.gas}}</text>
				<text>{{item.distend}}</text>
				<text>{{item.place}}</text>
				<text>{{item.year}}</text>
			</view>
			<view class="line">

			</view>
			<view class="content-tap">
				<text @tap="edit" class="write">编辑</text>
				<text @tap="closeappointopen" class="cancel">取消</text>
				<uni-popup type="center" ref="closeappoint">
					<view class="changepopup2">
						<view class="changepopup-top2">
							<view class="changepopup-top2-image">
							</view>
							<text>确认取消</text>
							<view class="changepopup-top2-image" @tap="closeappoint">
								<image  :src="close" mode=""></image>
							</view>
							
						</view>
						<view class="close-order-botton">
							<text  @tap="closeappoint" class="cancel1">取消</text>
							<text @tap="ensurecloseappoint" class="succeed">确认</text>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="create" @click="makeOrder">
			创建需求单
		</view>
		<uni-popup ref="needOrder" type="center">
			<view class="info">
				<view class="title-box">
				<view></view>
				<view class="title">创建需求订单</view>
				<img @tap="closeneedOrder" class="close-img" :src="close" alt="">
			</view>
			<scroll-view scroll-y="true" class="info-s">
				
				<view class="brand-box">
					<view class="name">品牌</view>
					<checkbox-group class="check-box">
						<label @click="checkboxClick(index,'0')" class="uni-list-cell uni-list-cell-pd check-item" v-for="(item,index) in brandItems" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="brand-box">
					<view class="name">车系</view>
					<checkbox-group class="check-box">
						<label @click="checkboxClick(index,'1')" class="uni-list-cell uni-list-cell-pd check-item" v-for="(item,index) in carType" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="brand-box">
					<view class="name">用车时间</view>
					<view class="mid-time">
						<view class="mid-time-left">
							<picker class="uni-input" mode="date" :value="startdate" :start="startDate" @change="startbindDateChange">
								<view >{{startdate}}</view>
							</picker>
						</view>
						<view class="mid-mid">
							<view></view>
						</view>
						<view class="mid-time-right">
							<picker class="uni-input" mode="date" :value="enddate" :end="endDate" @change="endbindDateChange">
								<view>{{enddate}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="brand-box">
					<view class="name">颜色</view>
					<checkbox-group class="check-box">
						<label @click="checkboxClick(index,'2')" class="uni-list-cell uni-list-cell-pd check-item" v-for="(item,index) in carColor" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="brand-box">
					<view class="name">车龄</view>
					<checkbox-group class="check-box">
						<label @click="checkboxClick(index,'3')" class="uni-list-cell uni-list-cell-pd check-item" v-for="(item,index) in carAge" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="brand-box">
					<view class="name">归属地</view>
					<checkbox-group class="check-box">
						<label @click="checkboxClick(index,'4')" class="uni-list-cell uni-list-cell-pd check-item" v-for="(item,index) in ownPlace" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
				<view class="brand-box">
					<view class="name">预计价格</view>
					<input type="text" placeholder="请输入的您的期待价格" />
				</view>
				<view class="button">
					<view @tap="submit" class="buttonwords">确认提交</view>
				</view>
			</scroll-view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import apis from '../../api.js'
	import request from '../../requst.js' //引进requst方法
	import icons from "../../common/icons.js"
	export default {
		comments: {
			uniPopup,
			uniIcons
		},
		data() {
			const startcurrentDate = this.getDate({
				format: true
			})
			const endcurrentDate = this.getDate({
				format: true
			})
			return {
				useOrderlist: [{
						name: '法拉利458',
						state: '待确认',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '1500'
					},
					{
						name: '法拉利488',
						state: '已确认',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '1500'
					},
					{
						name: '法拉利F12',
						state: '已完成',
						time: '2020.11.28-2020.11.30',
						color: '红色',
						gas: '98号汽油',
						distend: '15.3km',
						place: '深圳',
						year: '2年',
						money: '1500'
					},
				],
				brandItems: [{
						value: '0',
						name: '法拉利',
						checked: false
					},
					{
						value: '1',
						name: '兰博基尼',
						checked: false
						
					},
					{
						value: '2',
						name: '劳斯莱斯',
						checked: false
					},
					{
						value: '3',
						name: '宾利',
						checked: false
					},
					{
						value: '4',
						name: '其他',
						checked: false
					}
				],
				carType: [{
						value: '0',
						name: '458',
						checked: false
					},
					{
						value: '1',
						name: 'California',
						checked: false
						
					},
					{
						value: '2',
						name: '其他',
						checked: false
					}
				],
				carColor: [{
						value: '0',
						name: '红色',
						checked: false
					},
					{
						value: '1',
						name: '蓝色',
						checked: false
						
					},
					{
						value: '2',
						name: '黑色',
						checked: false
					},
					{
						value: '2',
						name: '白色',
						checked: false
					},
					{
						value: '2',
						name: '粉色',
						checked: false
					},
					{
						value: '2',
						name: '绿色',
						checked: false
					},
					{
						value: '2',
						name: '其他',
						checked: false
					}
				],
				carAge: [{
						value: '0',
						name: '1年以内',
						checked: false
					},
					{
						value: '1',
						name: '1-3年',
						checked: false
						
					},
					{
						value: '2',
						name: '3年以上',
						checked: false
					}
				],
				ownPlace: [{
						value: '0',
						name: '粤A',
						checked: false
					},
					{
						value: '1',
						name: '粤B',
						checked: false
						
					},
					{
						value: '2',
						name: '粤C',
						checked: false
					}
				],
				currentIndex:0,
				startdate: startcurrentDate,//用车开始时间
				enddate: '还车日期',//换车时间
				caraddress:'',//车辆归属地
				carage:'',//车龄
				carbrand:'',//车品牌
				carcolor:'',//车颜色
				carprice:'',//车价格
				cartype:'',//车辆型号
				close:icons.icons.close,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			request({
				url: "/qijian/sendOrder/index",
				method: 'GET',
				success: function(res) {
					console.log(res);
				}
			})
		},
		methods: {
			makeOrder() {
				this.$refs.needOrder.open();
			},
			checkboxClick(index,type){
				this.currentIndex = index;
				var item = [];
				if(type == 0){
					item = this.brandItems;
					for (var i = 0; i < item.length; i++) {
					item[i].checked = false;
				}
				item[this.currentIndex].checked = true;
				console.log(item)
				this.carbrand=item[this.currentIndex].name
				}else if(type == 1) {
					item = this.carType;
					for (var i = 0; i < item.length; i++) {
						item[i].checked = false;
					}
					item[this.currentIndex].checked = true;
					console.log(item)
					this.cartype=item[this.currentIndex].name
				}else if(type == 2) {
					item = this.carColor;
					for (var i = 0; i < item.length; i++) {
						item[i].checked = false;
					}
					item[this.currentIndex].checked = true;
					console.log(item)
					this.carcolor=item[this.currentIndex].name
				}else if(type == 3) {
					item = this.carAge;
					for (var i = 0; i < item.length; i++) {
						item[i].checked = false;
					}
					item[this.currentIndex].checked = true;
					console.log(item)
					this.carage=item[this.currentIndex].name
				}else if(type == 4){
					item = this.ownPlace;
					for (var i = 0; i < item.length; i++) {
						item[i].checked = false;
					}
					item[this.currentIndex].checked = true;
					console.log(item)
					this.caraddress=item[this.currentIndex].name
				} 
				
				
			},
			startbindDateChange: function(e) {
				// console.log(e)
				this.startdate = e.target.value
			},
			endbindDateChange: function(e) {
				// console.log(e)
				this.enddate = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			closeappointopen(){
				this.$refs.closeappoint[0].open()
			},
			closeappoint(){
				this.$refs.closeappoint[0].close()
			},
			ensurecloseappoint(){
				this.$refs.closeappoint[0].close()
			},
			closeneedOrder(){
				this.$refs.needOrder.close();
			},
			submit(){
				this.$refs.needOrder.close();
				uni.showToast({
					title:'提交成功'
				})
			},
			edit(){
				this.$refs.needOrder.open();
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5
	}
</style>

<style scoped>
	.brand-box{
		margin-top: 40rpx;
	}
	.buttonwords{
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
	}
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 85vw;
		height: 88rpx;
		background: #000000;
		border-radius: 6px;
		margin-top: 50rpx;
	}
	.check-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-basis: 30%;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
		margin-right: 10rpx;
	}
	.check-box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title {
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.close-img {
		width: 28rpx;
		height: 28rpx;
	}

	.info {
		width: 85vw;
		height: 75vh;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
		border-radius: 12px;
		padding: 40rpx;
	}
	.info-s{
		width: 100%;
		height: 65vh;
	}
	.ALL {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 286rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 18rpx;
	}

	.content-top {
		width: 684rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.content-top-left {
		/* width: 130rpx; */
		height: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #292929;
		line-height: 32rpx;
	}

	.content-top-right {
		width: 124rpx;
		height: 24rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #B6914E;
		line-height: 24rpx;
	}

	.content-mid {
		width: 684rpx;
		height: 24rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #292929;
		line-height: 24rpx;
		margin-top: 28rpx;
	}

	.content-down {
		width: 684rpx;
		margin-top: 28rpx;
		display: flex;
	}

	.content-down>text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding-right: 48rpx;
	}

	.line {
		width: 684rpx;
		height: 1rpx;
		background-color: #F4F4F4;
		margin-top: 24rpx;
	}

	.content-tap {
		width: 684rpx;
		display: flex;
		justify-content: flex-end;
		padding-top: 10rpx;
	}

	.write {
		width: 120rpx;
		height: 56rpx;
		border-radius: 12rpx;
		border: 2rpx solid #B6914E;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B6914E;
		margin-right: 20rpx;
	}

	.cancel {
		width: 120rpx;
		height: 56rpx;
		border-radius: 12rpx;
		border: 2rpx solid #999999;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.create {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		margin-top: 20rpx;
	}
	.mid-time{
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 5%;
		margin-top: 24rpx;
	}
	.mid-time-left{
		width: 45%;
		height: 66rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}
	.mid-time-right{
		width: 45%;
		height: 66rpx;
		border-bottom: 2rpx solid #E6E9EE;
	}
	.changepopup2{
		width: 640rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.5);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}
	.changepopup-top2-image>image{
		width: 28rpx;
		height: 28rpx;
	}
	.changepopup-top2-image{
		width: 10%;
	}
	.close-order-botton{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 80rpx;
	}
	.changepopup-top2{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 36rpx;
		justify-content: center;
	}
	.cancel1{
		width: 240rpx;
		height: 88rpx;
		background: #E4E4E4;
		border-radius: 24rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		text-align: center;
		line-height: 88rpx;
		margin-left: 60rpx;
	}
	.succeed{
		width: 240rpx;
		height: 88rpx;
		background: #000000;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #B6914E;
		text-align: center;
		line-height: 88rpx;
		margin-left: 40rpx;
	}
	.changepopup-top2>text{
		width: 80%;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
	}
</style>
